<template>
  <div>
    <header-top :isfixed="isfixed" />
    <section>
      <!-- 轮播start -->
      <banner />
      <!-- 轮播end -->
      <!-- 分类start -->
      <div class="shoping-category" ref="here">
        <van-grid :border="false" :column-num="5">
          <van-grid-item>
            <div class="category-item">
              <div class="category-image">
                <img src="../../images/categoryIcon/category1.png" />
              </div>
              <div class="category-text">天天低价</div>
            </div>
          </van-grid-item>
          <van-grid-item>
            <div class="category-item">
              <div class="category-image">
                <img src="../../images/categoryIcon/category2.png" />
              </div>
              <div class="category-text">商城超市</div>
            </div>
          </van-grid-item>
          <van-grid-item>
            <div class="category-item">
              <div class="category-image">
                <img src="../../images/categoryIcon/category3.png" />
              </div>
              <div class="category-text">商城拼团</div>
            </div>
          </van-grid-item>
          <van-grid-item>
            <div class="category-item">
              <div class="category-image">
                <img src="../../images/categoryIcon/category4.png" />
              </div>
              <div class="category-text">手机数码</div>
            </div>
          </van-grid-item>
          <van-grid-item>
            <div class="category-item">
              <div class="category-image">
                <img src="../../images/categoryIcon/category5.png" />
              </div>
              <div class="category-text">商城家电</div>
            </div>
          </van-grid-item>
          <van-grid-item>
            <div class="category-item">
              <div class="category-image">
                <img src="../../images/categoryIcon/category6.png" />
              </div>
              <div class="category-text">免费水果</div>
            </div>
          </van-grid-item>
          <van-grid-item>
            <div class="category-item">
              <div class="category-image">
                <img src="../../images/categoryIcon/category7.png" />
              </div>
              <div class="category-text">消消乐</div>
            </div>
          </van-grid-item>
          <van-grid-item>
            <div class="category-item">
              <div class="category-image">
                <img src="../../images/categoryIcon/category8.png" />
              </div>
              <div class="category-text">签到有礼</div>
            </div>
          </van-grid-item>
          <van-grid-item>
            <div class="category-item">
              <div class="category-image">
                <img src="../../images/categoryIcon/category9.png" />
              </div>
              <div class="category-text">领券中心</div>
            </div>
          </van-grid-item>
          <van-grid-item>
            <div class="category-item">
              <div class="category-image">
                <img src="../../images/categoryIcon/category10.png" />
              </div>
              <div class="category-text">更多频道</div>
            </div>
          </van-grid-item>
        </van-grid>
      </div>
      <!-- 分类end -->
      <!-- 各种打折活动start -->
      <div class="shoping-activity">
        <card>
          <div class="shoping-activity-block">
            <div class="shoping-activity-item">
              <div class="activity-title">
                <div>天天低价</div>
                <div class="count-down">
                  <van-count-down :time="time">
                    <template #default="timeData">
                      <span class="block">{{
                        timeData.hours > 10
                          ? timeData.hours
                          : '0' + timeData.hours
                      }}</span>
                      <span class="colon">:</span>
                      <span class="block">{{ timeData.minutes }}</span>
                      <span class="colon">:</span>
                      <span class="block">{{
                        timeData.seconds > 10
                          ? timeData.seconds
                          : '0' + timeData.seconds
                      }}</span>
                    </template>
                  </van-count-down>
                </div>
              </div>
              <div class="activity-describe">人气好货限时抢</div>
              <div class="activity-image">
                <div>
                  <div class="activity-image-top">
                    <van-image
                      width="2.56rem"
                      height="2.56rem"
                      :src="require('../../images/activity/activity_1.jpg')"
                    />
                  </div>
                  <div class="activity-image-bottom">两个蛋</div>
                </div>
                <div>
                  <div class="activity-image-top">
                    <van-image
                      width="2.56rem"
                      height="2.56rem"
                      :src="require('../../images/activity/activity_2.jpg')"
                    />
                  </div>
                  <div class="activity-image-bottom">一杯茶</div>
                </div>
              </div>
            </div>
            <div class="shoping-activity-item">
              <div class="activity-title">
                <div>天天低价</div>
                <div class="count-down">
                  <van-count-down :time="time">
                    <template #default="timeData">
                      <span class="block">{{
                        timeData.hours > 10
                          ? timeData.hours
                          : '0' + timeData.hours
                      }}</span>
                      <span class="colon">:</span>
                      <span class="block">{{ timeData.minutes }}</span>
                      <span class="colon">:</span>
                      <span class="block">{{
                        timeData.seconds > 10
                          ? timeData.seconds
                          : '0' + timeData.seconds
                      }}</span>
                    </template>
                  </van-count-down>
                </div>
              </div>
              <div class="activity-describe">人气好货限时抢</div>
              <div class="activity-image">
                <div>
                  <div class="activity-image-top">
                    <van-image
                      width="2.56rem"
                      height="2.56rem"
                      :src="require('../../images/activity/activity_3.jpg')"
                    />
                  </div>
                  <div class="activity-image-bottom">蛋白粉</div>
                </div>
                <div>
                  <div class="activity-image-top">
                    <van-image
                      width="2.56rem"
                      height="2.56rem"
                      :src="require('../../images/activity/activity_4.jpg')"
                    />
                  </div>
                  <div class="activity-image-bottom">美的</div>
                </div>
              </div>
            </div>
            <div class="shoping-activity-item">
              <div class="activity-title">
                <div>天天低价</div>
                <div class="count-down">
                  <van-count-down :time="time">
                    <template #default="timeData">
                      <span class="block">{{
                        timeData.hours > 10
                          ? timeData.hours
                          : '0' + timeData.hours
                      }}</span>
                      <span class="colon">:</span>
                      <span class="block">{{ timeData.minutes }}</span>
                      <span class="colon">:</span>
                      <span class="block">{{
                        timeData.seconds > 10
                          ? timeData.seconds
                          : '0' + timeData.seconds
                      }}</span>
                    </template>
                  </van-count-down>
                </div>
              </div>
              <div class="activity-describe">人气好货限时抢</div>
              <div class="activity-image">
                <div>
                  <div class="activity-image-top">
                    <van-image
                      width="2.56rem"
                      height="2.56rem"
                      :src="require('../../images/activity/activity_5.webp')"
                    />
                  </div>
                  <div class="activity-image-bottom">没补贴</div>
                </div>
                <div>
                  <div class="activity-image-top">
                    <van-image
                      width="2.56rem"
                      height="2.56rem"
                      :src="require('../../images/activity/activity_6.webp')"
                    />
                  </div>
                  <div class="activity-image-bottom">有补贴</div>
                </div>
              </div>
            </div>
            <div class="shoping-activity-item">
              <div class="activity-title">
                <div>天天低价</div>
                <div class="count-down">
                  <van-count-down :time="time">
                    <template #default="timeData">
                      <span class="block">{{
                        timeData.hours > 10
                          ? timeData.hours
                          : '0' + timeData.hours
                      }}</span>
                      <span class="colon">:</span>
                      <span class="block">{{ timeData.minutes }}</span>
                      <span class="colon">:</span>
                      <span class="block">{{
                        timeData.seconds > 10
                          ? timeData.seconds
                          : '0' + timeData.seconds
                      }}</span>
                    </template>
                  </van-count-down>
                </div>
              </div>
              <div class="activity-describe">人气好货限时抢</div>
              <div class="activity-image">
                <div>
                  <div class="activity-image-top">
                    <van-image
                      width="2.56rem"
                      height="2.56rem"
                      :src="require('../../images/activity/activity_7.jpg')"
                    />
                  </div>
                  <div class="activity-image-bottom">一瓶二十</div>
                </div>
                <div>
                  <div class="activity-image-top">
                    <van-image
                      width="2.56rem"
                      height="2.56rem"
                      :src="require('../../images/activity/activity_8.jpg')"
                    />
                  </div>
                  <div class="activity-image-bottom">两瓶十五</div>
                </div>
              </div>
            </div>
          </div>
          <div class="shoping-activity-introduce">
            <div>
              <div class="introduce-tile-top">为您推荐</div>
              <div class="introduce-tile-bottom">精选频道</div>
            </div>
            <div>
              <div class="introduce-image">
                <van-image
                  width="50"
                  height="50"
                  :src="require('../../images/introduce/introduce_1.webp')"
                />
              </div>
              <div class="introduce-text">国际商品</div>
            </div>
            <div>
              <div class="introduce-image">
                <van-image
                  width="50"
                  height="50"
                  :src="require('../../images/introduce/introduce_2.webp')"
                />
              </div>
              <div class="introduce-text">国际商品</div>
            </div>
            <div>
              <div class="introduce-image">
                <van-image
                  width="50"
                  height="50"
                  :src="require('../../images/introduce/introduce_3.webp')"
                />
              </div>
              <div class="introduce-text">国际商品</div>
            </div>
            <div>
              <div class="introduce-image">
                <van-image
                  width="50"
                  height="50"
                  :src="require('../../images/introduce/introduce_4.png')"
                />
              </div>
              <div class="introduce-text">国际商品</div>
            </div>
          </div>
        </card>
      </div>
      <!-- 各种打折活动end -->
      <!-- 推荐榜单start -->
      <div class="shoping-recommend-rank">
        <div class="recommend-rank-title">推荐榜单</div>
        <div class="recommend-rank-block">
          <div class="recommend-rank-item">
            <card>
              <div class="recommend-rank-item-image">
                <van-image
                  width="3.2rem"
                  height="3.2rem"
                  :src="require('../../images/recommend/recommend_1.webp')"
                />
              </div>
              <div class="recommend-rank-item-text">
                <div class="rank-item-title">人气榜</div>
                <div class="rank-item-introduce">潮流女上衣服榜</div>
                <div class="rank-item-number">卖爆2633件</div>
              </div>
            </card>
          </div>
          <div class="recommend-rank-item">
            <card>
              <div class="recommend-rank-item-image">
                <van-image
                  width="3.2rem"
                  height="3.2rem"
                  :src="require('../../images/recommend/recommend_2.webp')"
                />
              </div>
              <div class="recommend-rank-item-text">
                <div class="rank-item-title">人气榜</div>
                <div class="rank-item-introduce">潮流女上衣服榜</div>
                <div class="rank-item-number">卖爆2633件</div>
              </div>
            </card>
          </div>
          <div class="recommend-rank-item">
            <card>
              <div class="recommend-rank-item-image">
                <van-image
                  width="3.2rem"
                  height="3.2rem"
                  :src="require('../../images/recommend/recommend_3.webp')"
                />
              </div>
              <div class="recommend-rank-item-text">
                <div class="rank-item-title">人气榜</div>
                <div class="rank-item-introduce">潮流女上衣服榜</div>
                <div class="rank-item-number">卖爆2633件</div>
              </div>
            </card>
          </div>
        </div>
      </div>
      <!-- 推荐榜单end -->
      <!-- 猜你喜欢start -->
      <div class="shoping-guess-love">
        <div class="guess-love-title">猜你喜欢</div>
        <div class="guess-love-block">
          <shopList />
        </div>
      </div>
      <!-- 猜你喜欢end -->
    </section>
    <!-- 底部导航 -->
    <footer class="footer">
      <footer-bottom />
    </footer>
  </div>
</template>
<script>
import headerTop from './headerTop'
import banner from './banner'
import shopList from './shopList'
import footerBottom from '../base/footerBottom'

export default {
  data() {
    return {
      currentPageIndex: 0,
      time: 10000000,
      isfixed: false,
      showHeaderTopPosition: 500,
    }
  },
  components: {
    headerTop,
    banner,
    shopList,
    footerBottom,
  },
  mounted() {
    this.showHeaderTop()
  },
  beforeDestroy() {},
  methods: {
    // 监听页面滚动显示顶部导航栏

    showHeaderTop() {
      window.addEventListener('scroll', this.handleScroll)
      this.showHeaderTopPosition = this.$refs.here.offsetTop
    },
    handleScroll() {
      // console.log(showHeaderTopPosition)
      var scrolllTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop
      // console.log(scrolllTop)
      if (scrolllTop > this.showHeaderTopPosition) {
        this.isfixed = true
      } else if (scrolllTop < this.showHeaderTopPosition) {
        this.isfixed = false
      }
    },
  },
}
</script>
<style lang="less" scoped>
@import '../../style/mixin.less';
// 分类start
.shoping-category {
  height: 6.82777777rem;
  .category-item {
    text-align: center;
    .category-image {
      > img {
        width: 1.792rem;
        height: 1.792rem;
      }
    }
    .category-text {
      font-size: 0.512rem;
    }
  }
}
// vant样式修改
/deep/.van-grid {
  height: 100%;
  .van-grid-item {
    height: 50%;
    .van-grid-item__content {
      padding: 0 !important;
      background-color: @backcolor;
    }
  }
}
// 分类end
// 各种活动start
.shoping-activity {
  height: 14.76333rem;
  width: 14.93333rem;
  margin: 0 auto;
  .shoping-activity-block {
    display: flex;
    flex-wrap: wrap;
    .shoping-activity-item {
      box-sizing: border-box;
      height: 5.54666rem;
      width: 50%;
      border-bottom: 1px solid #ddd;
      border-right: 1px solid #ddd;
      &:nth-child(2n) {
        border-right: none;
      }
      .activity-title {
        overflow: hidden;
        display: flex;
        font-weight: @titlefontweight;
        font-size: 0.597333rem;
        > div {
          color: #333333;
          margin-top: 0.341333rem;
          margin-left: 0.341333rem;
          &:nth-child(2) {
            flex: 1;
            margin-top: 0.256rem;
          }
        }
        .count-down {
          font-weight: normal;
        }
      }
      .activity-describe {
        font-size: 0.512rem;
        margin-left: 0.341333rem;
        color: #999999;
      }
      .activity-image {
        display: flex;
        text-align: center;
        > div {
          width: 50%;
          height: 3.84rem;
        }
        .activity-image-top {
          height: 2.56rem;
        }
        .activity-image-bottom {
          font-size: 0.597333rem;
          color: #333;
          margin-top: 0.256rem;
        }
      }
    }
  }
  .shoping-activity-introduce {
    display: flex;
    height: 3.66933rem;
    font-size: 0.68266rem;
    color: #333;
    overflow: hidden;
    > div {
      height: 100%;
      &:nth-child(1) {
        flex: 1;
        margin-left: 0.34133rem;
        margin-top: 0.64rem;
      }
      &:nth-child(2) {
        font-size: 0.512rem;
        text-align: center;
        width: 2.77333rem;
        margin-top: 0.17066rem;
      }
      &:nth-child(3) {
        font-size: 0.512rem;
        width: 2.77333rem;
        text-align: center;
        margin-top: 0.17066rem;
      }
      &:nth-child(4) {
        font-size: 0.512rem;
        width: 2.77333rem;
        text-align: center;
        margin-top: 0.17066rem;
      }
      &:nth-child(5) {
        font-size: 0.512rem;
        width: 2.77333rem;
        text-align: center;
        margin-top: 0.17066rem;
      }
    }
    .introduce-tile-top {
      font-weight: @titlefontweight;
    }
    .introduce-tile-bottom {
      font-size: 0.59733rem;
    }
  }
}

.colon {
  // display: inline-block;
  // color: #ee0a24;
}
.block {
  // display: inline-block;
  color: #000;
  font-size: 0.512rem;
  text-align: center;
  background-color: #ffcc00;
}
// 各种活动end
// 推荐榜单start
/deep/.shoping-recommend-rank {
  font-size: 0.682666rem;
  color: #333;
  .recommend-rank-title {
    font-weight: @titlefontweight;
    font-size: 0.768rem;
    margin-left: 0.42666rem;
    margin-top: 0.21333rem;
  }
  .recommend-rank-block {
    display: flex;
    justify-content: space-between;
    width: 14.9333rem;
    height: 5.674666rem;
    margin: 0 auto;
    margin-top: 0.213333rem;
    .recommend-rank-item {
      width: 4.82133rem;
      height: 5.67466rem;
      // background-color: #fff;
      .recommend-rank-item-image {
        padding-top: 0.21333rem;
        text-align: center;
        height: 3.2rem;
      }
      .recommend-rank-item-text {
        background: url('../../images/recommend/recommend_back_color.png')
          no-repeat;
        background-size: cover;
        height: 2.47466rem;
        color: #e2a772;
        position: relative;
        text-align: center;
        .rank-item-title {
          background-color: #fff;
          border: 1px solid #e2a772;
          border-radius: 0.42666rem;
          padding: 0 0.21333rem;
          width: 2.13333rem;
          height: 0.72533rem;
          position: absolute;
          top: 0;
          left: 50%;
          transform: translate(-50%, -50%);
          font-size: 0.597333rem;
        }
        .rank-item-introduce {
          padding-top: 0.59733rem;
          font-size: 0.59733rem;
          color: #fff;
          transform: scale(0.95);
        }
        .rank-item-number {
          color: #fff;
          font-size: 0.59733rem;
          transform: scale(0.9);
          padding-top: 0.085333rem;
        }
      }
    }
  }
}
// 推荐榜单end
// 猜你喜欢start
/deep/.shoping-guess-love {
  font-size: 0.68266rem;
  .guess-love-title {
    font-weight: @titlefontweight;
    color: #333;
    margin-left: 0.42666rem;
    font-size: 0.768rem;
    margin-top: 0.341333rem;
  }
  .guess-love-block {
    width: 14.93333rem;
    margin: 0 auto;
    margin-top: 0.213333rem;
    // 撑起起来不让底部导航挡住
    padding-bottom: 2rem;
  }
}
// 猜你喜欢end
// 底部导航start
.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
}
// 底部导航end
</style>
